<template>
  <view class="content">
    <view class="list">
      <view class="item" v-for="(item,i) in list" :key="i">
        <view class="headerBox">
          <view class="label" v-if="item.type == 1">
            公告
          </view>
          <view class="label" v-else>
            上课
          </view>
          <view class="time">
            {{item.create_time}}
          </view>
        </view>
        <span class="title">
          {{item.create_time}}
          <view class="red" v-if="item.state == 0">
          </view>
        </span>
        <view class="itemContent" v-if="item.openState == true">
          {{item.message}}
        </view>
        <view class="botBtn flex">
          <view class="teacherName">
            接收对象:{{item.teacher.teacher_nickname}}({{item.teacher.teacher_phone}}) [
            <text v-if="item.state == 0" style="color: #000;">未读</text>
            <text v-else style="color: #999;">已读</text>
            ]
          </view>
          <view class="btn" v-if="item.openState == false" @tap="openState(item,i)" style="margin-bottom: 15rpx;">
            展开查看
            <image src="../../static/img/open.png" mode=""></image>
          </view>
          <view class="btn" v-if="item.openState == true" @tap="item.openState = !item.openState"
            style="margin-bottom: 24rpx;">
            点击收缩
            <image src="../../static/img/collect.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: []
      };
    },
    onLoad() {
      this.getSystemMessageList()
    },
    methods: {
      async open(item) {
        item.openState = !item.openState
        const {
          data: res
        } = await uni.$http.post('teacher/index/readSystemMessage', {
          id: item.id
        })
      },
      async getSystemMessageList() {
        const {
          data: res
        } = await uni.$http.post('school/others/getSystemMessageList')
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        res.data.data.forEach(i => {
          i.openState = false
        })
        this.list = res.data.data
      },
      openState(i, n) {
        i.openState = true
      }
    }
  }
</script>

<style lang="scss">
  .content {
    .list {
      width: 700rpx;
      margin: 0 auto;
      margin-top: 42rpx;

      .item {
        width: 100%;
        min-height: 123rpx;
        box-shadow: 0 3rpx 3rpx rgba(0, 0, 0, 0.06);
        border: 2rpx solid rgba(236, 236, 236, 1);
        margin-bottom: 15rpx;
        padding: 19rpx 14rpx 0 42rpx;

        .headerBox {
          display: flex;
          align-items: center;

          .label {
            width: 37rpx;
            height: 20rpx;
            line-height: 20rpx;
            text-align: center;
            background: rgba(212, 48, 48, 1);
            font-size: 14rpx;
            color: #fff;
            margin-right: auto;
          }

          .time {
            font-size: 21rpx;
            color: rgba(153, 153, 153, 1);
          }
        }

        .title {
          position: relative;
          font-size: 24rpx;
          color: rgba(51, 51, 51, 1);
          margin-top: 7rpx;

          .red {
            position: absolute;
            top: 0rpx;
            right: -16rpx;
            width: 14rpx;
            height: 14rpx;
            background: rgba(255, 20, 20, 1);
            border-radius: 50%;
          }
        }

        .itemContent {
          font-size: 21rpx;
          margin-bottom: 40rpx;
          color: rgba(102, 102, 102, 1);
        }

        .botBtn {
          font-size: 21rpx;
          color: rgba(153, 153, 153, 1);

          .teacherName {
            margin-right: auto;
          }

          .btn {
            display: flex;
            justify-content: right;
            align-items: center;

            image {
              width: 20rpx;
              height: 18rpx;
              margin-left: 8rpx;
            }
          }
        }
      }
    }
  }
</style>